<template>
  <div class="main">
    <el-tabs type="border-card" @tab-click="tabClick" style="height: 95%">
      <el-tab-pane style="height: 90%" :label="type.Description" v-for="type in types" :key="type.EnumValue">
        <div class="header">
          <span style="margin-left: 20px" @click="clickCnt++">关键字</span>
          <el-input placeholder="请输入关键字" v-model="req.keyword" style="width: 200px; margin-left: 10px"
            clearable></el-input>
          <el-button type="text" style="margin-left: 20px" size="small" @click="getContributions()">
            搜索
          </el-button>
          <el-button type="text" style="margin-left: 20px" size="small" @click="calculateWeights()">
            贡献率统计
          </el-button>
          <el-button type="text" style="margin-left: 20px" size="small" @click="addVis = true">
            添加
          </el-button>
        </div>
        <el-table style="overflow: auto" height="90%" :data="res" stripe border highlight-current-row>
          <el-table-column type="index" width="60"></el-table-column>
          <el-table-column label="状态">
            <template slot-scope="scope">
              <el-tag type="default" v-if="!scope.row.CS_ContributionSured">
                待确认
              </el-tag>
              <el-tag type="success" v-if="scope.row.CS_ContributionSured">
                已确认
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="员工" width="160">
            <template slot-scope="scope">
              {{ scope.row.USR_Name }}
            </template>
          </el-table-column>
          <el-table-column label="贡献项及权重">
            <template slot-scope="scope">
              {{ scope.row.CP_Name }} ：{{ scope.row.CP_Weight }}
            </template>
          </el-table-column>
          <el-table-column label="贡献率(%)" prop="CC_Score">
            <template slot-scope="scope">
              {{ scope.row.CC_Score }}
            </template>
          </el-table-column>
          <el-table-column label="来源">
            <template slot-scope="scope">
              <a @click="toForm(scope.row.CC_FormID)" v-if="scope.row.FLOW_Name">
                【{{ scope.row.BF_Name }}】
                {{ scope.row.FLOW_Name }}
              </a>
              <div v-else>人工录入</div>
            </template>
          </el-table-column>
          <el-table-column label="完成时间" width="160">
            <template slot-scope="scope">
              {{ scope.row.CC_DoneTime | formatTime }}
            </template>
          </el-table-column>
          <el-table-column label="确认时间" width="160">
            <template slot-scope="scope">
              {{ scope.row.CC_CreateTime | formatDate }}
            </template>
          </el-table-column>
          <el-table-column label="备注">
            <template slot-scope="scope">
              {{ scope.row.CC_Remark }}
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="text" size="small" icon="el-icon-edit" @click="
                curCon = scope.row
              editVis = true
                ">
                修改
              </el-button>
              <el-button type="text" size="small" icon="el-icon-delete" @click="deleteContribution(scope.row.CC_ID)">
                删除
              </el-button>
            </template>
          </el-table-column>
          <template slot="append">
            <div style="
                margin: 10px;
                width: 100%;
                display: flex;
                align-items: center;
                font-size: 16px;
              ">
              合计:
              <span v-for="(item, index) in stat" :key="index" style="margin-left: 40px">
                {{ item.name }}{{ item.scoreSum }}%
              </span>
            </div>
          </template>
        </el-table>
      </el-tab-pane>
    </el-tabs>

    <el-drawer title="新增" :visible.sync="addVis" direction="rtl">
      <el-form label-width="100px" style="margin-top: 20px; width: 80%">
        <el-form-item label="贡献项">
          <el-select filterable v-model="newCon.CC_ContributionProjectID" style="width: 300px">
            <el-option v-for="(item, index) in curProjects" :key="index" :label="item.CP_Name"
              :value="item.CP_ID"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="员工">
          <el-select filterable v-model="newCon.CC_EmpID" style="width: 300px">
            <el-option v-for="(item, index) in employees" :key="index" :value="item.ECV_TargetID"
              :label="item.USR_Name">
              <span style="color: red" v-if="item.EMP_Status != 1">[{{ item.EMP_StatusDesc
              }}]</span>【{{ item.USR_Name }}】{{ item.USR_Phone | encodePhone }}</el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="贡献率">
          <el-input-number v-model="newCon.CC_Score" :min="0" :precision="2"></el-input-number>
        </el-form-item>
        <el-form-item label="备注">
          <el-input type="textarea" v-model="newCon.CC_Remark" rows="3" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="addContribution()">新增</el-button>
          <el-button type="text" @click="addVis = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>

    <el-drawer title="编辑" :visible.sync="editVis" direction="rtl">
      <el-form label-width="100px" style="margin-top: 20px; width: 80%" v-if="curCon">
        <el-form-item label="贡献项">
          <el-select filterable v-model="curCon.CC_ContributionProjectID" style="width: 300px">
            <el-option v-for="(item, index) in curProjects" :key="index" :label="item.CP_Name"
              :value="item.CP_ID"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="员工">
          <el-select filterable v-model="curCon.CC_EmpID" style="width: 300px">
            <el-option v-for="(item, index) in employees" :key="index" :value="item.ECV_TargetID"
              :label="item.USR_Name">
              <span style="color: red" v-if="item.EMP_Status != 1">[{{ item.EMP_StatusDesc
              }}]</span>【{{ item.USR_Name }}】{{ item.USR_Phone | encodePhone }}</el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="贡献率">
          <el-input-number v-model="curCon.CC_Score" :min="0" :precision="2"></el-input-number>
        </el-form-item>
        <el-form-item label="备注">
          <el-input type="textarea" v-model="curCon.CC_Remark" rows="3" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="editContribution()">保存</el-button>
          <el-button type="text" @click="editVis = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>

    <el-button @click="contributionSure" round type="warning" v-if="caseInfo && !caseInfo.CS_ContributionSured" style="
        position: fixed;
        right: 50px;
        bottom: 120px;
        width: 120px;
        height: 60px;
        font-size: 16px;
        z-index: 100;
      ">
      贡献率确认
    </el-button>

    <el-button @click="contributionUnsure" round type="danger" v-if="caseInfo && clickCnt >= 10" style="
        position: fixed;
        right: 50px;
        bottom: 120px;
        width: 120px;
        height: 60px;
        font-size: 16px;
        z-index: 100;
      ">
      贡献率反确认
    </el-button>
  </div>
</template>
<script>
import {
  getEmployees,
  getContributions,
  calculateWeights,
  addContribution,
  editContribution,
  deleteContribution,
  getCaseEmployeeTypes,
  getContributionProjects,
  contributionSure,
  contributionUnsure
} from '@/api/core/caseContribution'
export default {
  props: ['caseId', 'caseInfo'],
  data: function () {
    return {
      clickCnt: 0,
      employees: [],
      req: {
        type: null,
        caseId: null,
        keyword: '',
      },
      res: [],
      stat: null,
      curType: null,
      projects: [],
      types: [],
      newCon: {},
      curCon: null,
      addVis: false,
      editVis: false,
    }
  },
  computed: {
    curProjects() {
      return this.projects.filter(
        (x) => x.CP_EmployeeType == this.curType.EnumValue
      )
    },
  },
  methods: {
    tabClick(val) {
      this.curType = this.types.find((x) => x.Description == val.label)
      this.getContributions()
    },
    toForm(formId) {
      this.$router.push({
        name: 'formInfoPage',
        query: { formId },
      })
    },
    getEmployees() {
      getEmployees().then(({ data }) => {
        this.employees = data
      })
    },
    getCaseEmployeeTypes() {
      getCaseEmployeeTypes().then(({ data }) => {
        this.types = data
        this.curType = this.types[0]
        this.getContributionProjects()
        this.getContributions()
      })
    },
    getContributionProjects() {
      getContributionProjects().then(({ data }) => {
        this.projects = data
      })
    },
    getContributions() {
      this.req.caseId = this.caseId
      this.req.type = this.curType.EnumValue
      getContributions(this.req).then(({ data }) => {
        this.res = data.datas
        this.stat = data.stat
      })
    },
    calculateWeights() {
      this.$confirm(
        `是否自动统计${this.curType.Description}的贡献率？`,
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      ).then(() => {
        calculateWeights(this.req.caseId, this.curType.EnumValue).then(() => {
          this.getContributions()
        })
      })
    },
    addContribution() {
      this.newCon.CC_Type = this.curType.EnumValue
      this.newCon.CC_CaseID = this.caseId
      addContribution(this.newCon).then(() => {
        this.getContributions()
        this.addVis = false
      })
    },
    editContribution() {
      editContribution(this.curCon).then(() => {
        this.getContributions()
        this.editVis = false
      })
    },
    deleteContribution(id) {
      this.$confirm(`是否删除该费用项目`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        deleteContribution(id).then(() => {
          this.getContributions()
        })
      })
    },
    contributionSure() {
      this.$confirm(`是否确认贡献率？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        contributionSure(this.caseInfo.CS_ID).then(() => {
          this.getContributions()
        })
      })
    },
    contributionUnsure() {
      this.$confirm(`是否反确认？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        contributionUnsure(this.caseInfo.CS_ID).then(() => {
          this.getContributions()
        })
      })
    },
  },
  created: function () {
    if (!this.caseId) {
      return
    }
    this.getCaseEmployeeTypes()
    this.getEmployees()
  },
}
</script>
<style>
.el-drawer.rtl {
  overflow: scroll;
}

.el-tabs__content {
  height: 100%;
  overflow: auto;
}
</style>
<style scoped>
.header {
  width: 100%;
  padding: 10px;
  height: auto;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  background: #ffffff;
  border-radius: 5px;
  border-bottom: #f4f8ff 2px solid;
  display: flex;
  margin-bottom: 11px;
  align-items: center;
}

.main {
  height: 100%;
}
</style>
